<template>
    <!-- 确认入库页面 -->
      <div style="background-color: #f0f2f5; padding: 10px">
        <el-button @click="submitForm(ruleFormRef)">确认入库</el-button>
        <!-- <el-button type="danger">bao</el-button>
        <el-button type="success">修改</el-button>
        <el-button>刷新</el-button> -->
    </div>
    <h2 style="text-align: center;">入库申请</h2>

    <el-form
        ref="ruleFormRef"
        style="max-width: 1400px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >

    <p>基本信息</p>
    <!-- style="border-collapse: collapse;" -->
    <table>
        <tr>
            <td>
                <el-form-item label="单据主题：" prop="storageTopic">
                    <el-input v-model="ruleForm.storageTopic" disabled/>
                </el-form-item>
            </td>
            &nbsp;&nbsp;
            <td>
                <el-form-item label="单据编号：" prop="storageNumber">
                    <el-input v-model="ruleForm.storageNumber" disabled placeholder="保存后自动生成"/>
                </el-form-item>
            </td>
            &nbsp;&nbsp;
            <td>
                <el-form-item label="来源单据：" prop="storageSource">
                    <el-input v-model="ruleForm.storageSource" disabled/>
                </el-form-item>
            </td>
            &nbsp;&nbsp;
            <td>
                <el-form-item label="仓库名称：" prop="wName">
                    <el-input v-model="ruleForm.wName" @dblclick="dialogVisible = true" disabled/>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>
                <el-form-item label="申请人员：" prop="appName">
                    <el-input v-model="ruleForm.appName" disabled/>
                </el-form-item>
            </td>
            &nbsp;&nbsp;
            <td>
                <el-form-item label="申请时间：" prop="appDate">
                    <el-date-picker
                        v-model="ruleForm.appDate"
                        type="date"
                        placeholder="请选择申请日期"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        disabled
                    />
                </el-form-item>
            </td>
             &nbsp;&nbsp;
            <td>
                <el-form-item label="入库类别：" prop="storageType">
                    <el-select
                        v-model="ruleForm.storageType"
                        placeholder="请选择入库类别"
                        clearable
                        disabled
                    >
                        <el-option label="申请直接入库" value="申请直接入库" />
                        <el-option label="采购入库" value="采购入库" />
                        <el-option label="成品入库" value="成品入库" />
                        <el-option label="半成品报废入库" value="半成品报废入库" />
                    </el-select>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>
                <el-form-item label="供应商名称：" prop="vName">
                    <el-input v-model="ruleForm.vName" @dblclick="dialogVisible1 = true" disabled/>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td colspan="4"> 
                <el-form-item label="备注：" prop="storageRemark">
                    <el-input v-model="ruleForm.storageRemark" type="textarea" disabled/>
                </el-form-item>
            </td>
        </tr>
    </table>

    </el-form>

    <!-- 仓库弹框 -->
    <el-dialog
        v-model="dialogVisible"
        title="仓库管理"
        width="800"
        :before-close="handleClose"
    >
        <el-table :data="WarehouseList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="warehouseId" label="序号" />
            <el-table-column prop="wNumber" label="仓库编号">
                <template v-slot="scope">
                    <a>{{ scope.row.wNumber }}</a>
                </template>
            </el-table-column>
            <el-table-column prop="wName" label="仓库名称">
                <template v-slot="scope">
                    <a>{{ scope.row.wName }}</a>
                </template>
            </el-table-column>
            <el-table-column prop="wType" label="所属类别">
                <template #default="scope">
                    <span v-if="scope.row.wType === 1">成品区</span>
                    <span v-if="scope.row.wType === 2">待检验</span>
                    <span v-if="scope.row.wType === 3">生产车间线边库</span>
                    <span v-if="scope.row.wType === 4">良品区</span>
                    <span v-if="scope.row.wType === 5">业务代发区</span>
                    <span v-if="scope.row.wType === 8">不良品仓库</span>
                    <span v-if="scope.row.wType === 9">商品代发区</span>
                </template>
            </el-table-column>
            <el-table-column prop="wAddress" label="仓库地址" />
        </el-table>
        <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                            :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, sizes" prev-text="上一页"
                            next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                            共{{ Page.listcount }}条数据，每页{{ Page.PageSize }}条，共{{ Page.PageIndex }}/{{ Page.pagecount }}页
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                            :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, prev, pager, next" prev-text="上一页"
                            next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                            <el-button :disabled="Page.PageIndex == 1" @click="handleCurrentChange(1)">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                            :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, jumper" prev-text="上一页"
                            next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                            <el-button :disabled="Page.PageIndex == Page.pagecount"
                                @click="handleCurrentChange(Page.pagecount)">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Close()">取消</el-button>
                    <el-button type="primary" @click="submit()">
                    确定
                    </el-button>
                </div>
            </template>
  </el-dialog>

   <!-- 供应商弹框 -->
    <el-dialog
        v-model="dialogVisible1"
        title="供应商管理"
        width="800"
        :before-close="handleClose"
    >
        <el-table :data="tableData" border style="width: 100%"   @selection-change="handleSelectionChange1" >
            <el-table-column type="selection" width="55" />
            <el-table-column  label="序号" width="100"  type="index"  />
            <el-table-column prop="vNumber" label="供应商编号" width="100" />
            <el-table-column prop="vName" label="供应商名称" width="100" />
            <el-table-column prop="vGrade" label="供应商等级" width="100" />
            <el-table-column prop="sName" label="所在省份"   width="100"/>
            <el-table-column prop="cName" label="所在市" width="100" />
            <el-table-column prop="vendorTypeName" label="供应商类别"  width="100" />
            <el-table-column prop="hName" label="所属行业" width="100" />
            <el-table-column prop="vContact" label="联系人"  width="100" />
            <el-table-column prop="vDepartment" label="部门" width="100" />
            <el-table-column prop="vDuty" label="职位"   width="100"/>
            <el-table-column prop="bPhone" label="办公电话"  width="100"/>
            <el-table-column prop="vPhone" label="手机号码"  width="100"/>
         </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Close1()">取消</el-button>
                    <el-button type="primary" @click="submi1()">
                    确定
                    </el-button>
                </div>
            </template>
  </el-dialog>

<!-- 产品表格 -->
    <!-- <div>
        采购申请明细
        <el-button @click="addhang()" size="small">新增行</el-button>
    </div> -->
    <br/>
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <thead>
            <tr>
                <!-- <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th> -->
                <th style="height: 40px;">序号</th>
                <th>产品名称</th>
                <th>产品编号</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>单价</th>
                <th>申请入库数量</th>
                <th>确认入库数量</th>
                <th>批号</th>
                <th>生产日期</th>
                <th>有效日期</th>
                <th>到货日期</th>
                <th>包装方式</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check1" :key="index">
                <!-- <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td> -->
                <td style=" text-align: center;width: 50px;">{{ index + 1 }}</td>
                <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        @dblclick="dialogVisible3 = true" disabled/>
                </td>
                <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" /></td>
                <td><input v-model="item.pSpec" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.pUnit" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.pPrice" type="text"
                        style="height: 40px;width: 100%;text-align: center;" disabled/>
                </td>
                <td><input v-model="item.spConfirmNum" type="text" style="height: 40px;width: 100%;text-align: center;" disabled/></td>
                <td>
                    <input v-model="item.sumNum" v-if="item.sumNum==item.spConfirmNum" disabled type="text" style="height: 40px;width: 100%;text-align: center;"/>
                    <input v-model="item.sumNum" v-else type="text" style="height: 40px;width: 100%;text-align: center;"/>
                </td>
                <td><input v-model="item.batch" type="text" style="height: 40px;width: 100%;text-align: center;" disabled/></td>
                <td>
                    <el-date-picker
                        v-model="item.createDate"
                        style="width: 120px"
                        type="date"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        disabled
                    />
                </td>
                <td>
                    <el-date-picker
                        v-model="item.validDate"
                        style="width: 120px"
                        type="date"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        disabled
                    />
                </td>
                <td>
                    <el-date-picker
                    style="width: 120px"
                        v-model="item.arriveDate"
                        type="date"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        disabled
                    />
                </td>
                <td>
                    <el-select v-model="item.wrapName" disabled clearable placeholder="请选择包装方式"
                        style="height: 40px;width: 140px;text-align: center;">
                        <el-option label="纸箱包装" value="纸箱包装" />
                        <el-option label="塑料包装" value="塑料包装" />
                        <el-option label="常规包装" value="常规包装" />
                        <el-option label="其他" value="其他" />
                    </el-select>
                </td>
                <td>
                    <el-input
                        v-model="item.remark"
                        style="width: 120px"
                        :rows="2"
                        type="textarea"
                        disabled
                    />
                </td>
            </tr>
        </tbody>
    </table>

     <!-- 产品名称 -->
    <el-dialog v-model="dialogVisible3" title="产品名称选择" width="1000" style="height: 700px;">
        <span></span>
        <template #footer>
            <el-row>
                <!-- <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="options" :props="defaultProps" @node-click="handleNodeClick" />
                </el-col> -->
                <el-col :span="20">
                    <el-table :data="tableDatas" border style="width: 100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="pNumber" label="物品编码" align="center" width="140"/>
                        <el-table-column prop="pName" label="物品名称" align="center"/>
                        <el-table-column prop="pSpec" label="规格型号" align="center"/>
                        <el-table-column prop="pSpec" label="单位" align="center"/>
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible3 = false">
                保存
            </el-button>
        </template>
    </el-dialog>






    
</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter();
import http from '../../../http.js'

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const locationOptions = ['Home', 'Company', 'School']

//入库表字段
const ruleForm = reactive({
    "shippRequestAppId": 0,
    "storageTopic": "",//单据主题
    "storageNumber": "自动生成",//单据编号
    "storageSource": "",//单据来源
    "wName": "",//仓库名称
    "appName": localStorage.UserName,//申请人员
    "appDate": "",//申请日期
    "storageType": "",//入库类别
    "vName": "",//供应商名称
    "storageRemark": "",//备注
    "addName": "lf",
    "addTime": "2024-12-23",
    "office_Id": "11",
    "user_Id":1,
    "state": 1,
    "list": [
        {
        "storageProductId": 0,
        "storageNumber": "11",//单据编号(仓库入库申请单据编号)
        "pNumber": "",//产品编号
        "pName": "",//产品名称
        "pSpec": "",//规格型号
        "pUnit": "",//单位
        "pPrice": 0,//单价
        "spConfirmNum": 0,//申请入库数
        "sumPrice": 0,//总金额
        "batch": "",//批号
        "createDate": "",//生产日期
        "validDate": "",//有效期
        "arriveDate": "",//到货日期
        "wrapName": "",//包装方式
        "remark": "",//备注
        "sumNum": ''//确认入库数
        }
    ]
})

//验证
const rules = reactive<FormRules>({
    storageTopic: [
        { required: true, message: '单据主题不能为空', trigger: 'blur' },
    ],
    wName: [
        { required: true, message: '仓库名称不能为空', trigger: 'blur' },
    ],
})
//钩子函数
onMounted(() => {
    Getwarehouse();//显示仓库列表
    table();//显示供应商列表
    GetProduct();//显示产品列表
    GetFanWarehouseSApp();//反填入库申请
})


//反填
const GetFanWarehouseSApp = () => {
    axios.get(http.zblnb+'/erpck/api/WarehouseSApp/FanWarehouseSApp?id='+route.query.shippRequestAppId)
    .then(res => {
        console.log(res)    
        ruleForm.shippRequestAppId=res.data.data.shippRequestAppId
        ruleForm.storageTopic=res.data.data.storageTopic
        ruleForm.storageNumber=res.data.data.storageNumber
        ruleForm.storageSource=res.data.data.storageSource
        ruleForm.wName=res.data.data.wName
        ruleForm.appName=res.data.data.appName
        ruleForm.appDate=res.data.data.appDate
        ruleForm.storageType=res.data.data.storageType
        ruleForm.vName=res.data.data.vName
        ruleForm.storageRemark=res.data.data.storageRemark
        ruleForm.addName=res.data.data.addName
        ruleForm.addTime=res.data.data.addTime
        ruleForm.office_Id=res.data.data.office_Id
        ruleForm.user_Id=res.data.data.user_Id
        ruleForm.state = res.data.data.state
        check1.value=res.data.data.list
    })
    .catch(err => {
        console.log(err)    
    })
}


//#region 仓库弹框
//仓库管理
const dialogVisible=ref(false)

const WarehouseList=ref([])
const Getwarehouse = () => {
    axios.get(http.zblnb + '/erpck/api/Warehouse/ShowWarehouse', {
        params: {
            WNumber: '',
            WName: '',
            WType:'',
            PageIndex: Page.value.PageIndex,
            PageSize: Page.value.PageSize
        }
    })
    .then((res) => {
        // console.log(res)
        WarehouseList.value = res.data.data.list
        Page.value.listcount = res.data.data.listcount
        Page.value.pagecount = res.data.data.pagecount
    })
    .catch((err) => {
        console.log(err)
    })
}

//分页
const Page = ref({
    PageIndex: 1,
    PageSize: 5,
    listcount: 0,
    pagecount: 0
})
const handleSizeChange = (val: number) => {
    Page.value.PageSize = val;
    Getwarehouse()
}
const handleCurrentChange = (val: number) => {
    Page.value.PageIndex = val;
    Getwarehouse()
}

//仓库弹框里的多选框
const Wname=ref('')
const handleSelectionChange = (val:any) => {
    // check1.value = val
    Wname.value = val;
    
}
//取消
const Close = () => {
    dialogVisible.value= false
    ruleForm.wName = '';
}
//确定
const submit = () => {
    dialogVisible.value = false
    ruleForm.wName = Wname.value[0].wName;
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你真的要关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}










//#endregion


//#region 供应商管理
const dialogVisible1=ref(false)
//供应商显示
var tableData=ref([]);
const table=()=>{
    axios.get(http.zblnb+'/cg/api/Vendor/ProductTypeSelectShow',{
    params:{
        FId:'',
        Node:'',
        Name:'',
        Sid:'',
        Cid:'',
        Hid:'',
        BPhone:'',
        SPhone:'',
        ZProper:'',
        PageIndex:1,
        PageSize:100
    }
    }).then(res=>{
        // console.log(res.data.data)
        if(res.data.code==200){
            tableData.value=res.data.data.list
    }
    })
}

//供应商弹框里的多选框
const vName=ref('')
const handleSelectionChange1 = (val:any) => {
    // check1.value = val
    vName.value = val;
    
}
//取消
const Close1 = () => {
    dialogVisible1.value= false
    ruleForm.vName = '';
}
//确定
const submi1 = () => {
    dialogVisible1.value = false
    ruleForm.vName = vName.value[0].vName;
}





//#endregion

//默认关闭产品弹框
const dialogVisible3 = ref(false)
//c产品表字段
const formInline = reactive({
    PageIndex: 1,
    PageSize: 100,
    pageLast: 0,
    sumCount:0,
    PName: '',//产品名称
    PNumber: '',//产品编号
    Office_Id: '1',//公司id
    ProductTypeId:'',//产品类型id
})

//修改
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        check1.value.forEach(ele => {
            ruleForm.list.push({
               "storageProductId": 111,
                "storageNumber":  '12256',//单据编号(仓库入库申请单据编号)
                "pNumber":  ele.pNumber,//产品编号
                "pName":  ele.pName,//产品名称
                "pSpec":  ele.pSpec,//规格型号
                "pUnit":  ele.pUnit,//单位
                "pPrice": ele.pPrice,//单价
                "spConfirmNum": ele.spConfirmNum,//申请入库数
                "sumPrice":  ele.sumPrice,//总金额
                "batch":  ele.batch,//批号
                "createDate": ele.createDate,//生产日期
                "validDate":  ele.validDate,//有效期
                "arriveDate": ele.arriveDate,//到货日期
                "wrapName":  ele.wrapName,//包装方式
                "remark":  ele.remark,//备注
                "sumNum":  ele.sumNum//确认入库数
            })
        })
        ruleForm.list = ruleForm.list.filter((item) => item.pNumber != '')
        let code = 0;
        check1.value.forEach(ele => {
            if (ele.spConfirmNum < ele.sumNum) {
                code = 1;
                return
            }
            if (ele.spConfirmNum == ele.sumNum) {
                ruleForm.state = 2;
            }
            if (ele.spConfirmNum > ele.sumNum) {
                ruleForm.state = 3;
            }
            if (ele.sumNum <0) {
                code = 1;
                return
            }
        })
        if (code == 1) {
            ElMessage.error('确认入库数不能大于申请入库数')
            return
        } else {
            console.log(ruleForm)
            axios.put(http.zblnb+'/erpck/api/WarehouseSApp/UpdCWE',ruleForm)
            .then(res => {
                console.log(res)    
                if (res.data.data > 0) {
                    ElMessage.success('确认入库成功')
                    // router.push('/ShowWarehouseSApp')
                } 
                else {
                    ElMessage.error('确认入库失败')
                    return
                }
            })
        }
        
    } else {
      console.log('error submit!', fields)
    }
  })
}

// //点击新增行
// const addhang = () => {
//     check1.value.push({
//         pName: '',//产品名称
//         pNumber: '',//产品编号
//         pSpec:'',//产品规格
//         pUnit: '',//单位,
//         spConfirmNum: '',//数量
//         pPrice: '',//单价
//         batch:'',//批号
//         createDate: '',//生产日期
//         validDate: "",//有效期
//         SumNums:'',
//         arriveDate: "",//到货日期
//         wrapName:'',//包装方式
//         remark:'',//备注
//     });
// }

const options = ref([]);
//选择左侧产品分类
const defaultProps = {
    children: 'children',
    label: 'label',
}
const getProducts = () => {
    axios.get(http.zblnb+"/erpcp/api/ProductType/ProductTypeSelect")
    .then(res => {
        options.value = res.data.data;
    })
    .catch(err => {
        console.log(err);
    })
}
//点击产品分类获取id
const handleNodeClick = (data: any) => {
    // console.log(data.value);
    formInline.ProductTypeId = data.value;
}

//产品弹框里的多选框
const check1 = ref([])//获取选择的产品数据
const handleSelectionChange2 = (val:any) => {
    check1.value = val
    // val.forEach(ele => {
    //     check1.value.push({
    //         pName: ele.pName,//产品名称
    //         pNumber: '',//产品编号
    //         pSpec:'',//产品规格
    //         pUnit: '',//单位,
    //         spConfirmNum: '',//数量
    //         pPrice: '',//单价
    //         batch:'',//批号
    //         createDate: '',//生产日期
    //         validDate: "",//有效期
    //         arriveDate: "",//到货日期
    //         wrapName:'',//包装方式
    //         remark:'',//备注
    //     })
    // })
    // console.log(check1.value)
}

//获取产品列表
const tableDatas=ref([])
const GetProduct = () => {
    axios.get(http.zblnb+'/cg/api/ProcureApply/ProcureEnquirySelectLuFang')
    .then(res => {
        // console.log(res)
        tableDatas.value = res.data.data
    })
    .catch(err => {
        console.log(err)    
    })
}


//全选
const ids = ref([])
const selectAll = ref(false)
const toggleSelectAll = () => {
    ids.value = []
    if (selectAll.value) {
        ids.value = check1.value
    }else {
        ids.value = []
    }
    console.log(ids.value)
}

//点击复选框获取选中的值
const selectedRows = ref([])
const huoqu = () => {
    if (ids.value.length > 0) {
        selectedRows.value = check1.value;
        console.log(selectedRows.value)
    } else {
         selectedRows.value = []
          
    }
    
}




</script>
    
<style>
    
</style>